<template>
  <div class="list_box" v-if="search_data?.length > 0">
    <div v-for="(item, index) in search_data" :key="index" class="list_container">
      <div 
        class="list_item" 
        @click="toggleShowInfo(index)"
      >
        <img class="list_image" :src="item?.data?.head_image || '/public/yonghu.png'" alt="">
        <div class="list_info_box">
          <div class="list_info_name">{{ item?.data?.username || item?.data?.group_name || "匿名" }}</div>
          <div class="list_info_desc">{{ item?.data?.introduction }}</div>
        </div>
        <div 
          v-if="item.show_info" 
          class="interact_box"
        >
          <INTERACT  v-model:show_info_card="show_card" v-model:current_interact_info="current_interact_info" :info="item"/>
        </div>
      </div>
    </div>

    <div style="position: absolute;left:80px;top:50px" v-if="show_card">  
        <SHOWINFO  
        v-model:current_interact_info="current_interact_info" 
        v-model:show_info_card="show_card"/>
    </div>  
  </div>
  <div v-else style="text-align: center;">
    暂无数据
  </div>
</template>

<script setup>
import { defineModel, ref, watch } from 'vue';
import INTERACT from "./show_interact.vue"
import SHOWINFO from "./show_info.vue"
const search_data = defineModel('search_data');
const current_interact_info = ref()
let show_card = ref(false)

watch(()=>search_data.value, (newVal, oldVal) => {
  show_card.value = false
  current_interact_info.value ={}
});

const toggleShowInfo = (index) => {
  search_data.value[index].show_info = !search_data.value[index].show_info;
  if (!search_data.value[index].show_info) {
    show_card.value = false
  }
};
</script>

<style scoped>
/* 保持原有样式不变 */
.list_box {
  width: 100%;
  height: auto;
  margin: 2px auto;
} 

.list_container {
  width: 100%;
  height: 45px;
  /* background-color: #f8f8f9; */
  overflow: visible;
}

.list_item {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  overflow: visible;
  cursor: pointer;
}

.list_image {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  flex-shrink: 0;
}

.list_info_box {
  flex: 1;
  height: 100%;
  min-width: 0; 
  padding-left: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.list_info_name,
.list_info_desc {
  width: 100%;
  overflow: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 2px;
}

.list_info_name {
  font-size: 15px;
  line-height: 15px;
}

.list_info_desc {
  font-size: 12px;
  line-height: 12px;
  color: #666;
}

.interact_box {
  position: absolute;
  top: 0px;
  left: calc(-100% + 15px);
  height: 100%;
  z-index: 10;
}
</style>